<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>shorthand + grad</title>
<style>
html, body {
  color: white;
  background-color: black;
}
pre.code {
  color: #ffc;
  background-color: #110;
  border: 1px solid navy;
}
.view {
  position: relative;
  padding: 10px;
}
.grad-base {
  -uu-box-shadow: white 0 0 10px;
  -uu-border-radius: 20px;
  width: 100px;
  height: 30px;
  font-weight: bold;
  text-align: center;
}
.grad1:hover {
  -uu-background: blue
    -uu-gradient(linear, 0 0, 0% 100%,
                     from(#E1F00E),
                     color-stop(0.6,#333333),
                     to(#C99C22));
}
.grad1 {
  cursor: pointer;
  position: relative;
  -uu-background: blue
    -uu-gradient(linear, 0 0, 0% 100%,
                     from(#C99C22),
                     color-stop(0.6,#333333),
                     to(#E1F00E));
}
.grad2 {
  cursor: pointer;
  -uu-background-color: blue;
  -uu-background-image:
    -uu-gradient(linear, 0 0, 0% 100%,
                     from(#C99C22),
                     color-stop(0.6,#333333),
                     to(#E1F00E));
}
.float-left {
  float: left;
}

</style>
<script>
window.UUMETA_DEBUG = 1;
</script>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuMeta.cdsl.js"></script>
<script src="../../../src/uuMeta.data.js"></script>
<script src="../../../src/uuMeta.event.resize.js"></script>
<script src="../../../src/uuMeta.normalize.js"></script>
<script src="../../../src/uuCodec.js"></script>
<script src="../../../src/uuToken.js"></script>
<script src="../../../src/uuImage.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyle.shadow.js"></script>
<script src="../../../src/uuStyle.opacity.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuCSSValidator.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS.ie.js"></script>
<script src="../../../src/uuAltCSS.imports.js"></script>
<script src="../../../src/uuAltCSS.cleanup.js"></script>
<script src="../../../src/uuAltCSS.calcspec.js"></script>
<script src="../../../src/uuAltCSS.boxeffect.js"></script>
<!--
<script src="../../uuAltCSS.js"></script>
 -->

<script>
function mousedown(elm) {
  // sink
  elm.style.top = "2px";
  elm.style.left = "2px";
}
function mouseup(elm) {
  // surface
  elm.style.top = "0px";
  elm.style.left = "0px";
}
function boot() {
}
</script>

</head>
<body>
<input type="button" value="revalidate" onclick="uuAltCSS()" />

<hr />
<h2>Multiple Background Image, shorthand + gradient</h2>


<div class="view float-left" onmousedown="mousedown(this)" onmouseup="mouseup(this)">
  <div class="grad-base grad1">grad1</div>
</div>

<div class="view float-left" onmousedown="mousedown(this)" onmouseup="mouseup(this)">
  <div class="grad-base grad2">grad2</div>
</div>


</body>
</html>